<template>
  <div class="register">
    <div class="register_from">
      <div class="register_title">
        <h2 @click="loginFn">KERN</h2>
        <p>账号注册</p>
      </div>
      <div class="register_input">
        <div class="input_box">
          <span>账户名：</span>
          <input
            type="text"
            placeholder="请输入名称"
            v-model="inpname"
            @blur="nameFn"
          />
        </div>
        <div class="nametip"></div>
        <div class="input_box">
          <el-select
            v-model="value"
            placeholder="请选择"
            class="phonesel"
            size="small"
          >
            <el-option
              v-for="item in cities"
              :key="item.value"
              :label="item.value"
              :value="item.value"
            >
              <span style="float: left">{{ item.label }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{
                item.value
              }}</span>
            </el-option>
          </el-select>
          <input
            type="text"
            placeholder="请输入手机号"
            v-model="phone"
            @blur="phoneFn"
          />
        </div>
        <div class="phonetip"></div>
        <div class="input_box">
          <el-input
            placeholder="请输入密码"
            v-model="passw"
            show-password
            id="lookinp"
            size="small"
            @blur="passwFn"
          ></el-input>
        </div>
        <div class="passwtip"></div>
        <div class="input_check">
          <input type="checkbox" v-model="check" />
          <span>我已阅读并接受 《服务协议》 和 《隐私政策》</span>
        </div>

        <div class="input_button">
          <button @click="registerFn">注册</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { user_register, userLogin } from "../api/test";
export default {
  name: "register",
  data() {
    return {
      // 名称框
      inpname: "",
      //   密码框
      passw: "",
      //   地区选择框
      value: "+86",
      //   手机号
      phone: "",
      //   服务款框状态验证
      check: false,
      //   注册时验证所有表单
      Tip: false,
      cities: [
        {
          value: "+86",
          label: "中国",
        },
        {
          value: "+91",
          label: "印度",
        },
        {
          value: "+62",
          label: "印度尼西亚",
        },
        {
          value: "+66",
          label: "泰国",
        },
        {
          value: "+60",
          label: "马来西亚",
        },
        {
          value: "+84",
          label: "越南",
        },
      ],
    };
  },

  methods: {
    // 名称框检测
    nameFn() {
      let nameTip = document.querySelector(".nametip");
      if (
        /^[\u4e00-\u9fa5]{1,10}$/.test(this.inpname) &&
        this.inpname.length > 0
      ) {
        this.Tip == true;
        nameTip.innerHTML = "";
      } else {
        nameTip.innerHTML = "姓名输入不正确，请输入中文";
        nameTip.style.color = "red";
        this.Tip = false;
      }
    },
    // 检测手机号
    phoneFn() {
      let phoneTip = document.querySelector(".phonetip");
      if (/^[1]\d{10}$/.test(this.phone) && this.phone.length > 0) {
        this.Tip = true;
        phoneTip.innerHTML = "";
      } else {
        this.Tip = false;
        phoneTip.innerHTML = "手机号输入错误";
        phoneTip.style.color = "red";
      }
    },
    // 检测密码
    passwFn() {
      let Passw = document.querySelector(".passwtip");
      if (this.passw.length >= 6 && this.passw.length <= 18) {
        Passw.innerHTML = "";
        this.Tip = true;
      } else {
        Passw.innerHTML = "密码设置错误，密码长度应为6～18位";
        Passw.style.color = "red";
        this.Tip = false;
      }
    },

    // 注册请求
    registerFn() {
      if (this.Tip == true && this.check == true) {
        // 请求
        user_register({
          name: this.inpname,
          password: this.passw,
          phone: this.phone,
          type: 1,
        })
          .then((res) => {
            console.log(res);
            this.$message({
              message: "注册成功，即将为您自动登陆",
              type: "success",
            });
            setTimeout(() => {
              userLogin({
                phone: this.phone,
                password: this.passw,
              }).then((res) => {
                sessionStorage.setItem("user", JSON.stringify(res.data.result));
                this.$store.commit("userLogin");
                this.$router.push({path:"/"})
                this.$message({
                  message: "登陆成功，现在在首页",
                  type: "success",
                });
              });
            }, 1000);
          })
          .catch((err) => {
            this.$message({
              message: "名称或手机号已被占用，请重试！",
              type: "warning",
            });
          });
      } else if (this.check == false && this.Tip == true) {
        alert("请勾选服务条款");
      } else {
        alert("名称或账号、密码不正确");
      }
    },

    loginFn() {
      this.$router.push({ path: "/" });
    },
  },
};
</script>

<style lang="scss" scoped>
.register {
  width: 100%;
  height: 100vh;
  background-color: #f7f7f7 !important;
  .register_from {
    margin: 0 auto;
    width: 65%;
    height: 80%;
    background-color: #fff;
    transform: translateY(10%);
    .register_title {
      padding-top: 50px;
      text-align: center;
      h2 {
        cursor: pointer;
        letter-spacing: 5px;
        font-size: 50px;
        color: blue;
      }
      p {
        font-size: 20px;
      }
    }

    .register_input {
      margin-top: 35px;
      display: flex;
      flex-direction: column;
      position: relative;

      .nametip {
        position: absolute;
        top: 50px;
        left: 300px;
        font-size: 12px;
      }
      .phonetip {
        position: absolute;
        top: 113px;
        left: 300px;
        font-size: 12px;
      }
      .passwtip {
        position: absolute;
        top: 173px;
        left: 300px;
        font-size: 12px;
      }

      .input_box {
        border: 1px solid #000;
        margin: 15px auto;
        display: flex;
        align-items: center;
        border-radius: 5px;
        height: 30px;
        width: 300px;
        overflow: hidden;
        input {
          width: 250px;
          height: 30px;
          border: none;
        }
        span {
          display: block;
          width: 100px;
          text-align: right;
        }
        #lookinp {
          width: 260px;
          border-width: 0;
          border-radius: 0;
        }
        .phonesel {
          width: 100px;
          border: none;
          //   height: 30px;
        }
      }

      .input_check {
        display: flex;
        align-items: center;
        width: 300px;
        margin: 0 auto;
        margin-top: 10px;
        input {
          width: 15px;
          height: 15px;
          margin-right: 15px;
        }
        span {
          font-size: 12px;
        }
      }

      .input_button {
        width: 300px;
        margin: 0 auto;
        margin-top: 40px;
        button {
          width: 100%;
          height: 50px;
          border: none;
          background-color: blue;
          font-size: 20px;
          letter-spacing: 10px;
          color: #fff;
        }
      }
    }
  }
}
</style>